<%--
  Created by IntelliJ IDEA.
  User: Tang'ya'kang
  Date: 2023/5/10
  Time: 17:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Only_book_User Registration</title>
    <style>
        div{
            position: relative;
        }
    </style>
</head>
<body>
<%@ include file="head.jsp"%>
<script>
    $(function () {
        $("#codeImg").click(function () {
            this.src="${sessionScope.basePath}kaptchaServlet.jpg?"+new Date();
        });
        $("#selectusername").click(function () {
            //alert("1231");
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/JaveWeb/userServlet",
                data: { username: $("#username").val(),hidden:"UsernameIsAvailable"},
                success: function(response) {
                    alert(response);
                    //$("#UsernameIsAvailable").text(response);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("请求失败：" + textStatus + " " + errorThrown);
                }
            });
        });
    });
</script>
<div class="card">
    <div class="card-body">
        <h5 class="card-title" align="center" style="font-size: 20px">用户注册</h5>
        <h5 class="card-title" align="center" style="font-size: 8px">User Registration</h5>
        <form action="./userServlet" method="post">
            <input type="hidden" name="hidden" value="UserRegistration">
            <div class="form-group" style="display: flex;align-items: center;justify-content: center;left: 71px">
                <label> 用 户 名 ：</label>
                <input type="text" class="form-control" id="username" name="username" style="width: 400px;height: 50px">
                <button type="button" class="btn btn-primary" id="selectusername">检查用户名是否可用</button>
                <span id="UsernameIsAvailable"></span>
            </div>
            <div class="form-group" style="display: flex;align-items: center;justify-content: center;left: -4px">
                <label> 密 码 ：</label>
                <input type="password" class="form-control" id="password1" name="password1" style="width: 400px;height: 50px">
            </div>
            <div class="form-group" style="display: flex;align-items: center;justify-content: center;left: -24px">
                <label > 确 认 密 码 ：</label>
                <input type="password" class="form-control" id="password2" name="password2" style="width: 400px;height: 50px">
            </div>
            <div class="form-group" style="display: flex;align-items: center;justify-content: center;left: 86px;top: -24px">
                <label> 验 证 码 ：</label>
                <input type="text" class="form-control" id="code" name="code" style="width: 400px;height: 50px">
                <img src="./kaptchaServlet.jpg" width="200px" height="100px" id="codeImg">
            </div>
            <div align="center" style="top: -40px"><button type="submit" class="btn btn-primary" style="width: 100px">提交</button></div>
            <label align-self="center"> <font color="red">${requestScope.status}</font></label>
        </form>
    </div>
    <%@ include file="Foot.jsp"%>
</div>
</body>
</html>
